<template>
   <view  v-if="curValue && readOnly">
       <uv-qrcode ref="qrcode" :size="qrcodeSize" :value="curValue" :options="options"></uv-qrcode>
   </view>
    <view v-else-if="readOnly && !curValue">
        <RxEmpty></RxEmpty>
    </view>
   <view v-else>
       <input  class="ant-input" v-model="curValue" :disabled="readOnly" @input="onChange"/>
   </view>
</template>

<script>
/**
 * 二维码
 * https://www.uvui.cn/components/qrcode.html
 * 二维码
 * https://uqrcode.cn/doc/document/native.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE
 */
import MForm from "../js/MForm";
import RxEmpty from "@/components/RxEmpty"
export default {
    name: "MQRCode",
    mixins: [MForm],
    components:{RxEmpty},
    data() {
        return {
            curValue:"",
            options: {
                useDynamicSize: false,
                errorCorrectLevel: this.metadata.options.errorLevel || "Q",
                margin: 10,
                foregroundColor: this.metadata.options.qrcodeColor ||  "#000000",
            }
        }
    },
    computed: {
        qrcodeSize() {
            return this.metadata.options.qrcodeSize+"px" || "160px";
        },

    },
    created() {
        this.initValue(this.value);
    },
    methods: {
        initValue(value) {
            if (!value) return;
            this.curValue = value;
        },
        onChange(e){
            this.setData(e.detail.value);
        }
    },
    watch: {
        value(val) {
            this.initValue(val);
        }
    },
}
</script>

<style scoped>

</style>
